<template>
    <div class="top-box">
        <el-row style="align-items: center">
            <el-col :span="6">
                <text class="title">三级部件</text>
                <text class="content">{{ data.thirdName }}</text>
            </el-col>
            <el-col :span="6">
                <text class="title">二级设备</text>
                <text class="content">{{ data.secondName }}</text>
            </el-col>
            <el-col :span="6">
                <text class="title">一级设备</text>
                <text class="content">{{ data.firstName }}</text>
            </el-col>
            <el-col :span="6" style="display: flex">
                <el-radio-group v-model="radio" style="padding-right: 12px">
                    <el-radio :label="true" @click.native.prevent="templateClick(true)">使用已有检查项模版</el-radio>
                </el-radio-group>
                <el-select style="padding-left: 10px" v-model="templateData" placeholder="请选择检查项库" @change="templateChange">
                    <el-option v-for="item in templateOption" :label="item.label" :value="item.value" />
                </el-select>
            </el-col>
        </el-row>
    </div>
    <div class="content-box">
        <text class="title">新增检查项</text>
        <el-table :data="tableData" border style="width: 100%; margin: 16px 0 9px">
            <el-table-column type="index" label="序号" width="70" />
            <el-table-column prop="itemName" label="检查项">
                <template #default="scope">
                    <el-input maxlength="30" v-model="scope.row.itemName" placeholder="请输入检查项" />
                </template>
            </el-table-column>
            <el-table-column prop="inspectionResult" label="检查结果">
                <template #default="scope">
                    <el-select filterable v-model="scope.row.inspectionResult" placeholder="请选择检查结果">
                        <el-option v-for="item in resultOption" :key="item.value" :label="item.label" :value="item.value" />
                    </el-select>
                </template>
            </el-table-column>
            <el-table-column prop="disposalMethod" label="处置方式">
                <template #default="scope">
                    <el-select filterable v-model="scope.row.disposalMethod" placeholder="请选择处置方式">
                        <el-option v-for="item in methodOption" :key="item.value" :label="item.label" :value="item.value" />
                    </el-select>
                </template>
            </el-table-column>
            <el-table-column label="操作">
                <template #default="scope">
                    <text class="delete" @click="deletes(scope)">删除</text>
                </template>
            </el-table-column>
        </el-table>
        <div @click="add" class="round">
            <i class="iconfont icon-jiahao icon"></i>
        </div>
    </div>
    <div class="bg">
        <div class="box">
            <div class="button">
                <div class="submit" @click="submit">
                    <text class="submitText">提交</text>
                </div>
                <div class="close" @click="close">
                    <text class="closeText">取消</text>
                </div>
            </div>
        </div>
    </div>
    <el-dialog destroy-on-close v-model="dialogVisible" title="更改检查项模板" :close-on-click-modal="false" width="30%">
        <text class="dialog-text">您之前设置过检查项模板</text><br />
        <text class="dialog-text">您可以使用新的检查项完全覆盖当前数据，也可以保留当前数据</text>
        <div class="button" style="padding-top: 30px">
            <div class="submit" @click="cover">
                <text class="submitText">覆盖</text>
            </div>
            <div class="retain" @click="retain">
                <text class="closeText">保留当前数据</text>
            </div>
            <div class="close" @click="dialogVisibleClose">
                <text class="closeText">取消</text>
            </div>
        </div>
    </el-dialog>
</template>
<script setup>
import { ref, computed } from "vue";
import { useRouter } from "vue-router";
import {
    batchaddinspectionitem,
    getinspectionitemtemplatelist,
    getinspectionitembytemplateid,
    getinspectioniteminspectionresultlist,
    getinspectionitemdisposalmethodlist
} from "@/service/api/tacticalManagement.js";

const router = useRouter();
const id = computed(() => router.currentRoute.value.query.id);
const data = computed(() => JSON.parse(decodeURIComponent(router.currentRoute.value.query.data)), console.log(decodeURIComponent(router.currentRoute.value.query.data)));
const dialogVisible = ref(false);
const templateOption = ref([]);
const radio = ref(false);
const templateData = ref();
const resultOption = ref([]);
const methodOption = ref([]);
const tableData = ref([]);

getinspectioniteminspectionresultlist().then((res) => {
    if (res.code === 200) {
        resultOption.value = res.data.map((item) => ({ label: item.name, value: item.value }));
    }
});
getinspectionitemdisposalmethodlist().then((res) => {
    if (res.code === 200) {
        methodOption.value = res.data.map((item) => ({ label: item.name, value: item.value }));
    }
});

const add = () => {
    tableData.value.push({ itemName: "", inspectionResult: "", disposalMethod: "" });
};
const deletes = (scope) => {
    tableData.value.splice(scope.$index, 1);
};
const close = () => {
    router.back();
};

const templateClick = (value) => {
    radio.value = radio.value == value ? !value : value;
    if (radio.value) {
        getinspectionitemtemplatelist().then((res) => {
            if (res.code === 200) {
                templateOption.value = res.data.map((item) => ({ label: item.name, value: item.value }));
            }
        });
    } else {
        templateData.value = "";
        templateOption.value = [];
    }
};
const templateChange = () => {
    dialogVisible.value = true;
};
const dialogVisibleClose = () => {
    dialogVisible.value = false;
};
const cover = () => {
    const loadingInstance = ElLoading.service();
    getinspectionitembytemplateid({ templateId: templateData.value }).then((res) => {
        if (res.code === 200) {
            tableData.value = res.data.map((item) => ({ itemName: item.itemName, inspectionResult: item.inspectionResult, disposalMethod: item.disposalMethod }));
        }
        dialogVisibleClose();
        loadingInstance.close();
    });
};
const retain = () => {
    const loadingInstance = ElLoading.service();
    getinspectionitembytemplateid({ templateId: templateData.value })
        .then((res) => {
            if (res.code === 200) {
                tableData.value = tableData.value.concat(res.data.map((item) => ({ itemName: item.itemName, inspectionResult: item.inspectionResult, disposalMethod: item.disposalMethod })));
            }
            dialogVisibleClose();
            loadingInstance.close();
        })
        .catch(() => {
            loadingInstance.close();
        });
};
const submit = () => {
    let result = true;
    for (let i = 0; i < tableData.value.length; i++) {
        const key = Object.keys(tableData.value[i]);
        for (let j = 0; j < key.length; j++) {
            if (!tableData.value[i][key[j]]) {
                result = false;
                break;
            }
        }
    }
    if (!result) {
        ElMessage({
            message: "新增检查项数据不能为空",
            type: "warning"
        });
    } else {
        const loadingInstance = ElLoading.service();
        batchaddinspectionitem({ templateId: id.value, items: tableData.value })
            .then((res) => {
                if (res.code === 200) {
                    ElMessage({
                        message: "新增成功",
                        type: "success"
                    });
                    router.back();
                }
                loadingInstance.close();
            })
            .catch(() => {
                loadingInstance.close();
            });
    }
};
</script>
<style lang="less" scoped>
.round {
    height: 30px;
    width: 30px;
    border-radius: 50%;
    border: 1px solid #eeeeee;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}
.icon {
    color: #8c8c8c;
    font-size: 18px;
}
.dialog-text {
    font-size: 14px;
    font-weight: 400;
    color: #1b3646;
}
.button {
    display: flex;
    justify-content: center;
}
.close {
    margin-left: 8px;
    width: 80px;
    height: 30px;
    border: 1px solid #00428e;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}
.retain {
    margin-left: 8px;
    width: 100px;
    height: 30px;
    border: 1px solid #00428e;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}
.closeText {
    color: #00428e;
    font-size: 14px;
    font-weight: 400;
}
.submit {
    width: 80px;
    height: 32px;
    background: #00428e;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}
.submitText {
    color: #ffffff;
    font-size: 14px;
    font-weight: 400;
}
.bg {
    background-color: #ffffff;
    .box {
        padding: 16px;
        .title {
            font-size: 16px;
            font-weight: 600;
            color: #1b3646;
            padding-bottom: 16px;
        }
    }
}
.delete {
    font-size: 14px;
    font-weight: 400;
    color: #0065b2;
    cursor: pointer;
}
.top-box {
    padding: 22px 13px;
    background-color: #fff;
    margin-bottom: 16px;
    .title {
        font-size: 14px;
        font-weight: 400;
        color: #1b3646;
    }
    .content {
        font-size: 14px;
        font-weight: 400;
        color: #595959;
        padding-left: 16px;
    }
}
.content-box {
    padding: 22px 13px;
    background-color: #fff;
    margin-bottom: 16px;
    .title {
        font-size: 16px;
        font-weight: 600;
        color: #1b3646;
    }
}
</style>
